<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户首页</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <div id="app">
    <div>{{title}}</div>

    <div>

      <div class="logo">
        <span v-if="tbUserInfo.img">
          <img :src="tbUserInfo.img" alt="">
        </span>
        <span v-else>没有头像</span>
      </div>

      欢迎：{{tbUser.nickname}}({{tbUser.username}})
      性别：{{tbUserInfo.sex | sex}}
      注册日期：{{tbUser.lastupdate | formatDate('yyyy-MM-dd')}}
      注册天数：{{userOtherInfo.regDays}}

      <button @click="showModify">修改用户附加信息</button>
      <button @click="mailVisible=true">修改邮箱</button>

    </div>

    <!-- 修改用户附加信息 -->
    <div v-if="visible" class="modify-box">

      <div>
        性别：
        <select v-model="modifyInfo.sex">
          <option v-for="d in sexList" :value="d.value">
            {{d.text}}
          </option>
        </select>
        <br>
        <input type="text" v-model="modifyInfo.nickname" placeholder="用户名">
        <br>
        <input type="text" v-model="modifyInfo.img" placeholder="用户头像url">
        <br>
        <input type="text" v-model="modifyInfo.qq" placeholder="qq号">
        <br>
        <input type="text" v-model="modifyInfo.wechat" placeholder="微信号">
        <br>
        <input type="text" v-model="modifyInfo.info" placeholder="简介">
        <br>
        <button @click="modify">保存</button>
        <button @click="visible=false;">关闭</button>

        <!-- <br>
        {{modifyInfo}} -->

      </div>

    </div>

    <!-- 修改邮箱信息 -->
    <div v-if="mailVisible">
      原邮箱：{{tbUserInfo.email}}
      <br>
      邮箱地址<input type="text" v-model="mailInfo.email">
      <button @click="sendCode">发送验证码</button>
      验证码<input type="text" v-model="mailInfo.code">
      <button @click="saveMail">保存</button>
      <button @click="mailVisible=false">关闭</button>

      {{mailInfo}}
    </div>



    <div>
      {{tbUser}}
      <hr>
      {{tbUserInfo}}
    </div>
    
    <!-- {{userOtherInfo}} -->

  </div>


  <script src="../lib/axios.min.js"></script>
  <script src="../lib/qs.min.js"></script>
  <script src="../lib/spark-md5.min.js"></script>
  <script src="../lib/vue.min.js"></script>
  <script src="../js/ajax.js"></script>
  <script src="../js/filters.js"></script>

  <script src="js/main.js"></script>

</body>

</html>